<!DOCTYPE html>
<html base="/" lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登陆</title>
    <link rel="stylesheet" href="/static/login/css/login.css?k=2">
</head>
<body>
<div id="canvas-cont"></div>
<div class="content-div">

    <!---圆角框-->
    <p class="line"></p>

    <!--欢迎词-->
    <!-- <p class="welcome">登陆</p> -->

    <div class="flex borderBox item">
        <img src="/static/login/img/user.png" alt="">
        <input type="text" name="name" value="" placeholder="用户名" class="user">
    </div>
    <div class="flex borderBox item">
        <img src="/static/login/img/pass.png" alt="">
        <input type="password" name="password" value="" placeholder="密码" class="pass">
    </div>
    <!--<div class='borderBox item' id="vaptchaContainer">-->
        <!--<div class="vaptcha-init-main">-->
            <!--<div class="vaptcha-init-loading">-->
                <!--<a href="https://www.vaptcha.com" target="_blank">-->
                    <!--<img src="https://cdn.vaptcha.com/vaptcha-loading.gif"/>-->
                <!--</a>-->
                <!--<span class="vaptcha-text">Vaptcha启动中...</span>-->
            <!--</div>-->
        <!--</div>-->

    <!--</div>-->
    <!--  <div class="flex borderBox item">
        <img src="/static/login/img/pass.png" alt="" >
        <input autocomplete="off" type="captcha" value="" name="captcha" placeholder="验证码" class="captcha">
    </div>
    <div>
        <img id="captchaImg" src="{:captcha_src()}" onclick="this.src='/captcha?id='+Math.random()" alt="验证码" title="点击刷新" style="cursor: pointer">
        <p>点击图片刷新</p>
    </div> -->

    <p class="btn">登陆</p>

    <!--提示-->
    <p class="borderBox tip"></p>
</div>
<script src='/static/login/js/jquery-3.2.1.min.js'></script>
<!--<script src="//cdn.vaptcha.com/v2.js"></script>-->

<script src="https://v.vaptcha.com/v3.js"></script>
<script src="/static/login/js/canvas-particle.js"></script>
<script>
    var token; //验证码生成的token
    function vaptchaInit() {
        vaptcha({
            //配置参数

            vid: "{$data['vid']}", // 验证单元id
            type: "{$data['type']}", // 展现类型 嵌入式：'embed' 点击式:'click'
            container: '#vaptchaContainer', // 按钮容器，可为Element 或者 selector
            offline_server: 'http://xy.xiyuezuqiu.cn/admin/login/vaptcha', //离线模式服务端地址

        }).then(function (vaptchaObj) {
            vaptchaObj.listen('pass', function () {
                token = vaptchaObj.getToken();
                if ($('.user').val().trim() && $('.pass').val().trim()) {
                    $('p.btn').click();
                }
                ;
            });
            vaptchaObj.render();// 调用验证实例 vaptchaObj 的 render 方法加载验证按钮
            /* let timer = setInterval(()=>{
                let $ele =  $('#vaptchaContainer .vp-basic-cont .vp-about');
                if($ele.get(0)){
                    $ele.remove();
                    clearInterval(timer);
                    timer = null;
                };
            },100); */
        });
    }

    // vaptchaInit();

    document.addEventListener('keydown', function(event) {
        if (event.key === 'Enter') {
            // 处理回车事件的代码
            var user = $('.user').val().trim();
            var pass = $('.pass').val().trim();

            if (!user || !pass) {
                showToast('请输入用户名或密码');
                return;
            }

            //console.log(user, pass)
            if (/<([\s\S])+>/gi.test(user)) {
                showToast('输入用户名不合法');
                return;
            }
            ;
            if (/<([\s\S])+>/gi.test(pass)) {
                showToast('输入用户名不合法');
                return;
            }
            ;
            if (/<([\s\S])+>/gi.test(pass)) {
                showToast('输入用户名不合法');
                return;
            }
            ;

            // if (!token) {
            //     showToast('验证码未通过');
            //     return;
            // }
            // ;

            var data = {
                name: user,
                password: pass,
                // token: token
            };
            $.post('/admin/login/dologin', data).then(function (res) {
                if (res.code == 0) {
                    window.location.href = res.data;
                } else {
                    showToast(res.message);
                    vaptchaInit();
                }
            })
        }
    });

    //点击登陆
    $('p.btn').click(function (e) {
        e.stopPropagation();
        var user = $('.user').val().trim();
        var pass = $('.pass').val().trim();

        if (!user || !pass) {
            showToast('请输入用户名或密码');
            return;
        }
        ;
        //console.log(user, pass)
        if (/<([\s\S])+>/gi.test(user)) {
            showToast('输入用户名不合法');
            return;
        }
        ;
        if (/<([\s\S])+>/gi.test(pass)) {
            showToast('输入用户名不合法');
            return;
        }
        ;
        if (/<([\s\S])+>/gi.test(pass)) {
            showToast('输入用户名不合法');
            return;
        }
        ;

        // if (!token) {
        //     showToast('验证码未通过');
        //     return;
        // }
        // ;

        var data = {
            name: user,
            password: pass,
            // token: token
        };
        $.post('/admin/login/dologin', data).then(function (res) {
            if (res.code == 0) {
                window.location.href = res.data;
            } else {
                showToast(res.message);
                vaptchaInit();
            }
        })
    });


    let timer;

    function showToast(txt) {
        let $tipEle = $('.tip');
        $tipEle.text(txt).css({display: 'block'});
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        ;
        timer = setTimeout(function () {
            $tipEle.css({display: 'none'});
        }, 2000);
    }

    CanvasParticle();
</script>
</body>
</html>